<script setup lang="ts" name="GoodsSku">
// 商品sku选择
import { PropType } from 'vue'
import { GoodsInfoItem } from '@/types/data'
import bwPowerSet from '@/utils/power-set'
import { SkusItem } from '@/types/data'
const props = defineProps({
  goodsInfo: {
    type: Object as PropType<GoodsInfoItem>,
    required: true
  }
})
const emits = defineEmits<{
  (e: 'getSelected', sku: SkusItem): void
}>()
// 商品属性点击事件
const selectRvent = (i: any, item: any) => {
  // 如果按钮已经禁用，就直接return
  if (i.disabled) {
    return
  }
  if (i.selected) {
    i.selected = false
  } else {
    //  如果是选中某属性，先取消其他属性的选择，在选中当前项
    item.values.forEach((sub: any) => (sub.selected = false))
    i.selected = true
  }
  //   判断余下的没有选择的属性是否需要禁用
  updateSpecsDisabled()
  //   如果用户已经选择完成，将已选择的sku数据传递给父组件
  const selectArr = getUserSelected()
  //   判断，去掉空白项之后，用户选择的数据是否已经选择完成，也就是用户选择数据的数组长度是否等于specs数组的长度
  if (selectArr.filter(v => v).length === props.goodsInfo.specs.length) {
    //   将已经选择的数据传递给父组件
    // 找出已选择数据的sku
    // 让已选择的项拼接为字符串
    const userSelectStr = selectArr.join('★')
    // 利用数组的find方法，返回已选择数据的sku
    const findResult = props.goodsInfo.skus.find(item => {
      // 判断用户已经选择的项拼接的字符串是否等于sku当前循环项的valueName数组拼接的字符串
      return userSelectStr === item.specs.map(s => s.valueName).join('★')
    })
    if (findResult) {
      // 通知父组件，子传父
      emits('getSelected', findResult)
    }
  }
}

// 声明数据字典
const pathArr: { [e: string]: boolean } = {}

// 声明一个函数，用于处理生成数据字典
function getOathArr () {
  props.goodsInfo.skus
    .filter(v => v.inventory)
    .forEach(item => {
      const tempArr = bwPowerSet(item.specs.map(i => i.valueName))
      tempArr
        .map(sub => {
          return sub.join('★')
        })
        .forEach(t => {
          pathArr[t] = true
        })
    })
}
getOathArr()

// 声明一个函数，设置默认是否禁用某属性(相当于用户没有选择)
// function updateSpecsDisabled () {
//   props.goodsInfo.specs.forEach(item => {
//     item.values.forEach(i => {
//       i.disabled = !pathArr[i.name]
//     })
//   })
// }

// 判断没选择的属性是否要禁用
function updateSpecsDisabled () {
  // 循环商品属性的每一项，去判断他的values数组内的每一项是否在数据字典中
  props.goodsInfo.specs.forEach((item, index) => {
    // 拿到用户已选择的属性
    let userSelectedAll = getUserSelected()
    // 遍历每一项的values，判断values数组每一项的值和已选择项组合是否在数据字典中
    item.values.forEach(sub => {
      // 判断，如果是已经选择的属性，则直接返回，不在做判断
      if (sub.selected) {
        return
      }
      // 没有选择的属性判断是否需要禁用
      // 假设当该属性已经选中
      userSelectedAll[index] = sub.name
      //   拿到他们的组合属性到数据字典中查询
      let temp = userSelectedAll.filter(v => v).join('★')
      //   查询数据字典，有库存就不禁用，没库存就禁用
      sub.disabled = !pathArr[temp]
    })
  })
}
updateSpecsDisabled()

// 声明一个函数，用于获取用户已选择的数据
function getUserSelected () {
  const arr: string[] = []
  props.goodsInfo.specs.forEach(item => {
    const result = item.values.find(sub => {
      return sub.selected
    })
    arr.push(result ? result.name : '')
  })
  return arr
}

// ---------------------------
// 数据字典转换练习
// let goods = [
//   { name: '黑色--日本--20cm', total: 0 },
//   { name: '黑色--中国--20cm', total: 0 },
//   { name: '蓝色--日本--20cm', total: 1 },
//   { name: '蓝色--中国--30cm', total: 1 }
// ]
// let newGoods = goods.filter(item => {
//   return item.total > 0
// })
// let obj: any = {}
// newGoods.forEach(i => {
//   const temp = bwPowerSet(i.name.split('--'))
//   const newTemp = temp.map(sub => {
//     return sub.join('--')
//   })
//   newTemp.forEach(u => {
//     obj[u] = true
//   })
// })
// console.log(obj)
</script>
<template>
  <div class="goods-sku">
    <dl v-for="(item, index) in goodsInfo.specs" :key="index">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="(i, idx) in item.values" :key="idx">
          <span
            v-if="!i.picture"
            :class="{ selected: i.selected, disabled: i.disabled }"
            @click="selectRvent(i, item)"
            >{{ i.name }}</span
          >
          <img
            v-else
            @click="selectRvent(i, item)"
            :class="{ selected: i.selected, disabled: i.disabled }"
            :src="i.picture"
            alt=""
          />
        </template>
      </dd>
    </dl>
    <!-- <dl>
      <dt>尺寸</dt>
      <dd>
        <span class="disabled">10英寸</span>
        <span class="selected">20英寸</span>
        <span>30英寸</span>
      </dd>
    </dl> -->
  </div>
</template>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
